<template>
  <el-container class="container">
    <el-header
      class="x-header"
      style="height: 50px; padding: 0;">
      <x-header/>
    </el-header>
    <el-container>
      <el-aside
        width="auto">
        <div class="aside">
          <el-menu
            :default-openeds="['1']"
            :default-active="asideMenu"
            class="n-menu">
            <el-submenu index="1">
              <template slot="title">
                <span>系统设置</span>
              </template>
              <el-menu-item
                index="DB_TYPE"
                @click="menuClick({code: 'DB_TYPE', href: '/db/design/dbType'})">数据库类型</el-menu-item>
              <el-menu-item
                index="COLUMN_TYPE"
                @click="menuClick({code: 'COLUMN_TYPE', href: '/db/design/dbColumnType'})">字段类型</el-menu-item>
              <el-menu-item
                index="BASE_COLUMN"
                @click="menuClick({code: 'BASE_COLUMN', href: '/db/design/dbBaseColumn'})">基础字段</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-main class="x-main">
          <nuxt/>
        </el-main>
      </el-container>
    </el-container>
    <!--<el-footer-->
    <!--class="x-footer"-->
    <!--style="height: 30px;">-->
    <!--<x-footer />-->
    <!--</el-footer>-->
  </el-container>
</template>

<script>
import XHeader from '~/components/x-header'
import Mixin from '@/assets/mixin'
export default {
  components: {
    XHeader
  },
  mixins: [Mixin],
  doNotInit: true,
  data() {
    return {
      asideMenu: 'DB_TYPE'
    }
  },
  methods: {
    menuClick: function(menu) {
      this.setLocalData('asideMenu', menu.code, 'setAsideMenu')
      this.$router.push(menu.href)
    }
  }
}
</script>
